import React from 'react';
import { Form, Input, Button, Checkbox } from 'antd';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const cPassword = () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <>
      <Form
        style={{ margin: '7% 30% 0 0' }}
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="当前密码"
          name="password1"
          rules={[{ required: true, message: '密码不为空!!!' }]}
        >
          <Input.Password placeholder="6~16个字符，建议使用英文字母加数字或符号的混合密码" />
        </Form.Item>
        <Form.Item
          label="新密码"
          name="password2"
          rules={[{ required: true, message: '密码不为空!!!' }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          label="请再次输入新密码"
          name="password3"
          rules={[{ required: true, message: '密码不为空!!!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button
            style={{ marginRight: '20px' }}
            type="primary"
            htmlType="submit"
          >
            确认提交
          </Button>
          <Button htmlType="reset">取消</Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default cPassword;
